import { CloseSvg, InputSvg } from "@/app/assets/CustomizeSvg";
import { KnowledgeBaseModal } from "@/service/request/modal/dataModal";
import { ResponsePageModal } from "@/service/request/modal/responseModal";
import { createEmptyDataset } from "@/service/request/requestApi";
import { message } from "antd";
import { ChangeEvent, useEffect, useState } from "react";

const AddEmptyDataset = ({
    open, 
    setOpen, 
    data,
    callback
}: {
    open: boolean, 
    data: KnowledgeBaseModal,
    setOpen: (open: boolean) => void,
    callback?: (param?: any) => void
}) => {
    const [emptyDataset, setEmptyDataset] = useState<string>('');

    useEffect(() => {
        if (open) {
            Initialize();
        } else {
            Dispose();
        }
    },[open]);

    const Initialize = () => {
        if (!data) {
            closeModal();
        }
        setEmptyDataset("");
    }

    const Dispose = () => {
        setEmptyDataset("");
    }

    const closeModal = () => {
        setOpen(false);
    }

    const handleValueChange = (e: ChangeEvent<HTMLInputElement>) => {
        setEmptyDataset(e.target.value);
    }

    const submit = () => {
        if (!emptyDataset || emptyDataset.length <= 0) {
            message.warning("请输入集合名称");
        }
        const param = {
            datasetId: data.id,
            name: emptyDataset,
        }
        createEmptyDataset(param).then((res: ResponsePageModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("修改成功");
                if (callback) callback();
                closeModal();
            }
        }).catch((err) => {
            console.log("创建空集合失败", err);
        });
    }

    return (
        <>
            <div style={{
                display: open ? "block" : "none"
            }}
            className="fixed w-screen h-screen top-0 left-0 bg-black/20"
            >
                <div 
                className="mx-auto mt-16 w-fit h-fit text-black rounded-xl bg-white"
                onClick={(event) => {event.stopPropagation()}}
                >
                    <div className="w-full py-3 px-6 flex flex-row items-center justify-between bg-gray-100 rounded-ss-xl rounded-se-xl">
                        <div className="w-fit flex flex-row items-center justify-start gap-3 text-base">
                            <div className="text-blue-500 w-4 h-4 flex flex-row items-center justify-center"><InputSvg width={`100%`} height={`100%`} /></div>
                            <div>创建手动数据集</div>
                        </div>
                        <div className="w-8 h-8 p-1 transition-all duration-300 text-gray-600 hover:rotate-90 hover:bg-gray-300 rounded-lg cursor-pointer" onClick={closeModal}>
                            <CloseSvg width={`100%`} height={`100%`} />
                        </div>
                    </div>
                    <div className="w-fit py-3 px-6">
                        <div className="flex flex-col items-start justify-center gap-2">
                            <div className="text-gray-500">手动数据集允许创建一个空的容器装入数据</div>
                            <div 
                            className="flex flex-row items-center justify-center w-80 h-9 py-2 px-4 rounded-lg border border-gray-200 shadow-[0_0_5px_rgb(96,165,250,0.1)] shadow-transparent hover:border-blue-400 has-[input:focus-within]:border-blue-400 has-[input:focus-within]:shadow-blue-400"><input type="text" value={emptyDataset} className="border-none outline-none w-full h-full" onChange={(e) => {handleValueChange(e)}} /></div>
                        </div>
                        <div className="flex flex-row items-start justify-end mt-6 mb-1">
                            <div className="cursor-pointer px-5 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-500/80" onClick={submit}>确认</div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}


export {
    AddEmptyDataset
}